﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏障思维</title>
<meta name='viewport'
	content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<link rel="stylesheet" href="webpages/wx/pzsw/css/swiper.min.css">
<link rel="stylesheet" href="webpages/wx/pzsw/css/animate.min.css">
<script src="webpages/wx/pzsw/js/swiper.min.js"></script>
<script src="webpages/wx/pzsw/js/swiper.animate.min.js"></script>
<script src="webpages/wx/pzsw/js/jquery-1.12.4.min.js"></script>
<script src="webpages/wx/pzsw/js/hammer.min.js"></script>

<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

<style>
* {
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;
}

body {
	font-family: "microsoft yahei";
	overflow: hidden;
}

.swiper-container { /*  width: 320px;
    height: 480px;*/
	width: 100%;
	height: 100%;
	background: #000;
}

.swiper-slide {
	width: 100%;
	height: 100%;
	background: url(webpages/wx/pzsw/upload/bg.png) no-repeat left top;
	background-size: 100% 100%;
}

img {
	display: block;
}

.swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	background: #fff;
	opacity: .4;
}

.swiper-pagination-bullet-active {
	opacity: 1;
}

@
-webkit-keyframes start { 0%,30% {
	opacity: 0;
	-webkit-transform: translate(0, 10px);
}

60%
{
opacity




:


 


1;
-webkit-transform




:


 


translate




(0
,
0);
}
100%
{
opacity




:


 


0;
-webkit-transform




:


 


translate




(0
,
-8
px




);
}
}
@
-moz-keyframes start { 0%,30% {
	opacity: 0;
	-moz-transform: translate(0, 10px);
}

60%
{
opacity




:


 


1;
-moz-transform




:


 


translate




(0
,
0);
}
100%
{
opacity




:


 


0;
-moz-transform




:


 


translate




(0
,
-8
px




);
}
}
@
keyframes start { 0%,30% {
	opacity: 0;
	transform: translate(0, 10px);
}

60%
{
opacity




:


 


1;
transform




:


 


translate




(0
,
0);
}
100%
{
opacity




:


 


0;
transform




:


 


translate




(0
,
-8
px




);
}
}
.ani {
	position: absolute;
}

.txt {
	position: absolute;
}

#array {
	position: absolute;
	z-index: 999;
	-webkit-animation: start 1.5s infinite ease-in-out;
}

.swiper-slide2,.swiper-slide3,.swiper-slide4,.swiper-slide7,.swiper-slide8
	{
	width: 100%;
	height: 100%;
	background: url(webpages/wx/pzsw/upload/bg2.png) no-repeat left top;
	background-size: cover;
}

.swiper-slide18 {
	width: 100%;
	height: 100%;
	background: url(webpages/wx/pzsw/upload/bg3.png) no-repeat left top;
	background-size: cover;
}

.swiper-slide2 img,.swiper-slide3 img,.swiper-slide4 img {
	border: 4px solid #f77a06;
	margin-left: 6px;
}

input.form-input1 {
	width: 60%;
	position: relative;
	left: 20%;
	border: none;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	background: none;
	border-bottom: 1px solid #fff;
	margin-bottom: 10px;
	font-size: 1.4em;
}

input.form-input2 {
	width: 70%;
	position: relative;
	left: 15%;
	border: none;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #ef710b;
	background: none;
	border-bottom: 2px solid #ef710b;
	margin-bottom: 10px;
}

a {
	background-color: transparent;
	text-decoration: none;
}

a.index-a,a.index-b {
	width: 60%;
	padding: 3% 1%;
	text-align: center;
	display: block;
	border: 2px solid #fff;
	border-radius: 10px;
	color: #fff;
	background: #eb6100;
	position: relative;
	left: 19%;
	font-size: 1.3em;
	line-height: 24px;
	margin-bottom: 10px;
}

a.index-c {
	width: 70%;
	padding: 5% 1%;
	text-align: center;
	display: block;
	color: #fff;
	position: relative;
	left: 14%;
	font-size: 1.2em;
	line-height: 24px;
}

.pcl {
	font-size: 1.2em;
	padding: 5%;
	border: 4px solid #f77a06;
	border-radius: 15px;
	margin: 10px 10px;
}

h4 {
	color: #c25802;
	font-size: 20px;
	margin-top: 50px;
	padding: 30px 30px;
}

.hs {
	display: inline-block;
	/*     position: absolute; */
	font-size: 3em;
	margin-left: 15px;
	top: 10%;
	font-family: serif;
	color: #f77a06;
	font-weight: bold;
	font-style: italic;
}

.index-btn {
	margin: 350px auto;
	width: 320px;
}

.over-box {
	height: 50px;
	margin-left: 74px;
	/*     margin-bottom: 10px; */
}

.over-box img {
	width: 20%;
	float: left;
	margin-top: 3%;
}

a.over-a {
	width: 150px;
	padding: 10px 10px;
	text-align: center;
	/*     display: block; */
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 20px;
	color: #fff;
	background: #eb6100;
	position: relative;
	float: left;
	font-size: 1.2em;
	line-height: 18px;
	margin-bottom: 10px;
}

h3 {
	margin-left: 80px;
	margin-top: 80px;
}

h4 {
	color: #c25802;
	font-size: 18px;
	/* top: 80px; */
	margin-left: 80px;
	margin-top: 60px;
	margin-right: 10px;
	padding: 0px 0px;
}

.companyImg {
	width: 220px;
	left: 0px;
	top: 400px;
	z-index: 3;
	margin-left: 50px;
}
</style>


</head>

<body>
	<div class="swiper-container" id="swiper-container">
		<div class="swiper-wrapper">
			<section class="swiper-slide swiper-slide1">

				<img src="webpages/wx/pzsw/upload/logo.png" class="ani resize"
					style="width: 320px; left: 0px; top: 30px; z-index: 3;"> <img
					src="webpages/wx/pzsw/upload/company.png" class="ani resize"
					style="width: 220px; left: 0px; top: 400px; z-index: 3; margin-left: 50px;">
			</section>
			<!---------------slide2-------------->
			<section class="swiper-slide swiper-slide2">
				<!--         	<div> -->
				<h3>屏障思维案例示意1</h3>
				<img src="webpages/wx/pzsw/upload/demo1.png" class="ani resize"
					style="width: 300px; left: 0px; top: 100px; z-index: 1;">
				<!--         	</div> -->

			</section>
			<!----------------slide3-------------->
			<section class="swiper-slide swiper-slide3">
				<h3>屏障思维案例示意2</h3>

				<img src="webpages/wx/pzsw/upload/demo2.png" class="ani resize"
					style="width: 300px; left: 0px; top: 100px; z-index: 1;"
					swiper-animate-effect="zoomInLeft" swiper-animate-duration="0s"
					swiper-animate-delay="0s">


			</section>
			<!-------------slide4----------------->
			<section class="swiper-slide swiper-slide4">
				<h3>屏障思维案例示意3</h3>
				<img src="webpages/wx/pzsw/upload/demo3.png" class="ani resize"
					style="width: 300px; left: 0px; top: 100px; z-index: 1;"
					swiper-animate-effect="zoomInLeft" swiper-animate-duration="0s"
					swiper-animate-delay="0s">
			</section>


			<section class="swiper-slide swiper-slide5">
				<img src="webpages/wx/pzsw/upload/logo.png" class="ani resize"
					style="width: 320px; left: 0px; top: 30px; z-index: 3;">
				<div class="ani resize" style="top: 320px;">
					<input type="text" maxlength="10" class="form-control form-input1"
						id="name" name="name" placeholder="请输入姓名/油站" value="" required="">
					<input type="text" maxlength="10" class="form-control form-input1"
						id="dept" name="dept" placeholder="请输入部门/TM" value="" required="">
				</div>
			</section>

			<section class="swiper-slide swiper-slide6">
				<img src="webpages/wx/pzsw/upload/logo.png" class="ani resize"
					style="width: 320px; left: 0px; top: 30px; z-index: 3;">

				<div class="ani resize" style="top: 250px;">
					<a class="index-c"> 请选择以下你想参与的模块： </a> <a class="index-a"
						href="pzsw.action?page=content1-1&amp;moduleType=bad">
						不安全现象/不良习惯<span>（建议办公室选择）</span>
					</a> <a class="index-b"
						href="pzsw.action?page=content2-1&amp;moduleType=control">
						管控风险<span>（建议油站/承包商/承运商选择）</span>
					</a>
				</div>
			</section>

			<section class="swiper-slide swiper-slide7">
				<h4>
					<span class="hs">1</span>&nbsp;请写出一个会对你的安全/健康造成不良影响的因素<small>（不超过10个字）</small>
				</h4>
				<div class="ani resize pcl">
					<input type="text" class="form-control2 form-input2"
						id="questionName" name="questionName" placeholder="点击在此输入"
						maxlength="10" value="" required="">

					<p class="">
						如不安全行为：走路看手机、站在凳子上放物品、闯红灯等。<br />不安全状态：高处放置的物品、不平整的地面、未进行防护的插线板、长期不关电源、放置在电脑旁的水杯等。<br />不良习惯：
						晚睡、吸烟、酗酒等。
					</p>
				</div>
			</section>

			<section class="swiper-slide swiper-slide8">
				<h3>屏障思维</h3>
				<img src="webpages/wx/pzsw/upload/empty.png" class="ani resize"
					style="width: 300px; left: 0px; top: 100px; z-index: 1;"> <span
					style="position: absolute; top: 210px; left: 40px;">Axxxxx</span>
			</section>

			<section class="swiper-slide swiper-slide18"></section>

			<section class="swiper-slide swiper-slide19">
				<img src="webpages/wx/pzsw/upload/logo.png" class="ani resize"
					style="width: 320px; left: 0px; top: 30px; z-index: 3;">

				<div class="index-btn">
					<div class="over-box">
						<!-- 					<img class="img-responsive" src="webpages/wx/pzsw/upload/san-L.png" alt="">  -->
						<a class="over-a" href="#"> 分享到朋友圈 </a>
						<!-- 					<img class="img-responsive" src="webpages/wx/pzsw/upload/san-R.png" alt=""> -->
					</div>
					<div class="over-box">
						<!-- 					<img class="img-responsive" src="webpages/wx/pzsw/upload/san-L.png" alt="">  -->
						<a class="over-a" href="pzsw.action?page=index"> 再看一遍 </a>
						<!-- 					<img class="img-responsive" src="webpages/wx/pzsw/upload/san-R.png" alt=""> -->
						<!-- 					<div class="clearfix"></div> -->
					</div>
				</div>

				<img src="webpages/wx/pzsw/upload/company.png" class="ani resize"
					style="width: 220px; left: 0px; top: 400px; z-index: 3; margin-left: 50px;">

			</section>
		</div>

		<img src="webpages/wx/pzsw/images/arrow.png"
			style="width: 20px; height: 15px; top: 460px; left: 150px;"
			id="array" class="resize">
		<div class="swiper-pagination"></div>
	</div>


	<script>
		scaleW = window.innerWidth / 320;
		scaleH = window.innerHeight / 480;
		var resizes = document.querySelectorAll('.resize');
		for ( var j = 0; j < resizes.length; j++) {
			resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW
					+ 'px';
			resizes[j].style.height = parseInt(resizes[j].style.height)
					* scaleH + 'px';
			resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH
					+ 'px';
			resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW
					+ 'px';
		}

		var mySwiper = new Swiper(
				'.swiper-container',
				{
					direction : 'vertical',
					pagination : '.swiper-pagination',
					//virtualTranslate : true,
					mousewheelControl : true,
					onInit : function(swiper) {
						swiperAnimateCache(swiper);
						swiperAnimate(swiper);
					},
					onSlideChangeEnd : function(swiper) {
						swiperAnimate(swiper);
					},
					onSlideChangeStart : function(swiper) {
						// 	      alert(swiper.activeIndex);
						// 	      mySwiper.slideTo(swiper.activeIndex<0?0:swiper.activeIndex-1)
					},
					onSlideNextStart : function(swiper) {
						alert('事件触发了;');
					},
					onTransitionStart : function(swiper) {

					},
					onTransitionEnd : function(swiper) {
						swiperAnimate(swiper);
					},
					watchSlidesProgress : true,

					onProgress : function(swiper) {
						for ( var i = 0; i < swiper.slides.length; i++) {
							var slide = swiper.slides[i];
							var progress = slide.progress;
							var translate = progress * swiper.height / 4;
							scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
							var opacity = 1 - Math.min(Math.abs(progress / 2),
									0.5);
							slide.style.opacity = opacity;
							es = slide.style;
							es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'
									+ translate
									+ 'px,-'
									+ translate
									+ 'px) scaleY(' + scale + ')';

						}
					},

					onSetTransition : function(swiper, speed) {
						for ( var i = 0; i < swiper.slides.length; i++) {
							es = swiper.slides[i].style;
							es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed
									+ 'ms';

						}
					},

				})

		// 先要对监听的DOM进行一些初始化
		var hammer = new Hammer(document.getElementById("swiper-container"));
		hammer.get('swipe').set({
			direction : Hammer.DIRECTION_ALL
		});
		// 然后加入相应的回调函数即可
		hammer.on('swipeup', swipeEvent);
		hammer.on('swipedown', swipeEvent);

		function swipeEvent(evt) {
// 				 		alert(evt.type);
// 				 		alert(mySwiper.activeIndex)
			//从第四个开始
			var activeIndex = mySwiper.activeIndex;
			
			if (evt.type == 'swipedown') {
	
			} else if (evt.type == 'swipeup') {
				//下一页
				if(activeIndex==5) {
					if(evt.type=='swipeleft') {
						alert('请输入姓名/油站');
						mySwiper.slideTo(activeIndex<0?0:activeIndex-1);
						return ;
					}
					if($.trim($('#dept').val())=='') {
						alert('请输入部门/TM');
						mySwiper.slideTo(activeIndex<0?0:activeIndex-1);
						return ;
					}
				}
				
			}

		}
	</script>
</body>
</html>
